<template>
  <div class="tree-container">
    <!-- <div class="tree-title">{{ $t('目录管理') }}</div> -->
    <!-- <div class="tree-button" v-if="showTabs">
      <bs-icon iconName="add" class="hover-effect" @click.native="addTreeNode" showName label="新增" />
      <bs-icon iconName="remove" class="hover-effect" @click.native="removeTreeNode" showName label="删除" />
      <bs-icon iconName="edit" class="hover-effect" @click.native="editTreeNode" showName label="修改" />
      <bs-icon iconName="setting" class="hover-effect" @click.native="settingTreeNode" showName label="设置" />
    </div> -->
    <div class="tree-box">
      <x-tree
        ref="asyncTree"
        :default-props="defaultProps"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        :show-checkbox="false"
        accordion
        :draggable="false"
        :filter-visible="false"
        :data="treeData"
        :highlight-current="true"
        @node-click="nodeClick"
        @node-expand="nodeExpand"
        @node-collapse="nodeCollapse"
        iconClass="el-icon-folder-opened"
      ></x-tree>
    </div>
    <device-tree-add-dialog
      :visible.sync="visible"
      :id="treeNodeData.id"
      :isAdd="isAdd"
      @callback="refreshNode"
    ></device-tree-add-dialog>
    <DeviceTreeSettingDialog
      :visible.sync="settingVisible"
      :showChild="queryData.showChild"
      @callback="refreshNode"
    ></DeviceTreeSettingDialog>
  </div>
</template>
<script>
import DeviceTreeAddDialog from './DeviceTreeAddDialog'
import DeviceTreeSettingDialog from './DeviceTreeSettingDialog'

export default {
  components: {
    DeviceTreeAddDialog,
    DeviceTreeSettingDialog
  },
  props: {
    // 是否展示操作按钮
    showTabs: {
      type: Boolean,
      default: true
    },
    queryData:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      treeNodeData: {}, // 选中的tree的数据
      currentNode: {}, // 选中的tree的节点数据
      activeName: 'first',
      defaultProps: {
        label: 'name',
        isLeaf: 'hasChild'
      },
      treeData: [], // 树数据
      defaultCheckedKeys: [],
      defaultExpandedKeys: [0],
      contextMenuData: [],
      visible: false,
      settingVisible: false,
      isAdd:true
    }
  },
  mounted() {
    this.loadTreeData()
  },
  methods: {
    //终端分组树数据
    loadTreeData() {
      this.treeData = [{ id: 0, name: '山西省', type: 1, children: [] }]
      this.treeNodeData = this.treeData[0]
      let params = { type: '1' }
      this.$store.dispatch('device/doLoadTree', params).then(res => {
        if (res) {
          res.forEach(item => {
            this.treeData[0].children.push(item)
          })
        }
      })
    },
    refreshNode() {
      this.loadTreeData()
    },
    // 点击节点(传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node)
    nodeClick(data, node) {
      this.treeNodeData = data
      this.currentNode = node
      this.$emit('nodeClick', node)
    },
    // 展开树节点：（适用于3级结构：手风琴效果）
    nodeExpand(node){
      this.defaultExpandedKeys = ['0']
      if(node.data.id != 0){
        this.defaultExpandedKeys.push(node.data.id)
      }
    },
    // 关闭树节点
    nodeCollapse(node){
      if(node.data.id != 0){
        this.defaultExpandedKeys = this.defaultExpandedKeys.filter(item=>item !== node.data.id)
      }
    },
    // 添加节点
    addTreeNode() {
      if (this.currentNode.level == 3) {
        this.$alert('提示', '无法添加下级分组')
        return
      }
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个终端分组节点')
        return
      }
      if (this.treeNodeData.id === -1) {
        this.$alert('提示', '默认分组不能添加子节点')
        return
      }
      this.isAdd = true
      this.visible = true
    },
    // 编辑节点
    editTreeNode() {
      console.log(this.treeNodeData, '编辑节点')
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个终端分组节点')
        return
      }
      const selectTreeID = this.treeNodeData.id
      if (selectTreeID === -1 || selectTreeID === 0) {
        this.$alert('提示', '此目录不可操作')
        return
      }

      // let editorForm = {}
      // editorForm.id = this.treeNodeData.id
      // editorForm.name = this.treeNodeData.name
      // editorForm.flag = true
      this.visible = true
      this.isAdd = false
      // this.$eventBus.$emit('showDeviceTreeAddDialog', editorForm)
    },
    // 删除节点
    removeTreeNode() {
      var arr = Object.keys(this.treeNodeData)

      if (arr.length === 0) {
        this.$alert('提示', '请选择一个终端分组节点')
        return
      }
      const selectTreeID = this.treeNodeData.id
      if (selectTreeID === -1 || selectTreeID === 0) {
        this.$alert('提示', '此目录不可操作')
        return
      }
      this.$confirm('提示', '是否确认删除？').then(bool => {
        if (bool) {
          if (
            this.treeNodeData.children &&
            this.treeNodeData.children.length > 0
          ) {
            console.log('removeTreeNode=============', this.treeNodeData)
            //对不起，你不能删除该终端分组，原因：存在子分组，不能删除
            this.$alert(
              '提示',
              '对不起，你不能删除该终端分组，原因：存在子分组，不能删除'
            )
            // if (this.haveData) {
            //   this.$confirm('提示', '是否确认删除整个分组？').then((bool) => {
            //     if (bool) {
            //       const selectTreeID = this.treeNodeData.id
            //       const params = { id: selectTreeID }
            //       this.$store
            //         .dispatch('device/doDeleteTreeNode', params)
            //         .then((res) => {
            //           this.currentNode.remove()
            //           this.treeNodeData = {}
            //           this.$message.success('删除成功')
            //         })
            //     }
            //   })
          } else {
            const selectTreeID = this.treeNodeData.id
            const params = { id: selectTreeID }
            this.$store
              .dispatch('device/doDeleteTreeNode', params)
              .then(res => {
                this.currentNode.remove()
                this.treeNodeData = {}
                this.$message.success('删除成功')
              })
          }
        }
      })
    },
    settingTreeNode(){
      this.settingVisible = true
    },
    // 点击tab页
    doClickTree(treeItem) {
      this.treeNodeData = treeItem
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
  width: 100%;
}
.tree-title {
  height: 40px;
  border-bottom: 1px solid $bg-e9;
  background: $bg-f9;
  font-size: $font-size-14;
  color: $bg-33;
  letter-spacing: 4px;
  text-indent: 4px;
  line-height: 40px;
  text-align: center;
  // color:#fff;
  // background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  // background-size: 400%;
  // animation: animate 20s linear infinite;
}
@keyframes animate {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
.tree-button {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tree-box {
  // width: 248px;
  height: calc(100vh - 200px);
  overflow: auto;

  .tree {
    height: 100%;
    ::v-deep .el-tree {
      min-width: 100%;
      display: inline-block !important;
    }
  }

  // &.no-ctl {
  //   height: calc(100vh - 150px);
  //   .tree {
  //     height: 100%;
  //     ::v-deep .el-tree {
  //       min-width: 100%;
  //       display: inline-block !important;
  //     }
  //   }
  // }
}

::v-deep .el-button--mini.is-round {
    font-size: 12px;
    padding: 3px 10px;
}
</style>
